<template>
  <div class="card-article-content">
    <!-- <div>{{ data }}</div> -->
    <el-row class="pb-10">
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
        <el-card class="w-full">
          <template #header>
            <div class="card-header">
              <div class="flex title-content justify-center pt-5 pb-5">
                <span class="mt-5"></span>
                <h3 class="pr-4 pl-4">{{ newTipsInfo.title }}</h3>
                <span class="mt-5"></span>
              </div>
              <el-row>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
                <el-col :xs="24" :sm="24" :md="16" :lg="8" :xl="8">
                  <div class="flex justify-center text-center sub-title">
                    <label class="flex-1 text-center">
                      <svg-icon icon-class="tips" /><span
                        class="pl-3 whitespace-nowrap"
                        >{{ newTipsInfo.tips }}</span
                      ></label
                    >
                    <label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="time" /><span
                        class="pl-3 whitespace-nowrap"
                        >{{ newTipsInfo.createTime }}</span
                      ></label
                    ><label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="lookNum" /><span
                        class="pl-3 whitespace-nowrap"
                      >
                        {{ newTipsInfo.lookNum }}
                      </span></label
                    >
                  </div>
                </el-col>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
              </el-row>
            </div>
          </template>
          <p
            v-for="(item, index) in newTipsInfo.content"
            :key="index"
            class="p-2 card-article-content"
          >
            <span class="p-first-content">{{ item.firstContent }}</span>
            <span>{{ item.nextContent }}</span>
          </p>
        </el-card>
      </el-col>
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { WIDTH } from "@/utils/commonSize";
const appStore = useAppStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);

const props = defineProps({
  newTipsInfo: {
    type: Object,
    required: true,
  },
});
console.log("props", props.newTipsInfo);
</script>

<style lang="scss" scoped>
.card-article-content {
  font-size: var(--text-primary-size);
  .title-content {
    span {
      width: 40px;
      height: 1px;
      background-color: #000;
    }
    h3 {
      font-size: var(--text-h3-size);
    }
  }
  .sub-title {
    font-size: var(--text-sub-size);
  }
  .card-article-content {
    color: var(--color-text-title);
    font-size: var(--text-primary-size);
  }
  .p-first-content {
    color: red;
  }
}
</style>
